<template>
	<view class="container">
		<view class="player-box">
			<live-player id="livePlayer" class="live-player" ref="livePlayer" 
				:src="playUrl" mode="live" :autoplay="false" :muted="isMuted" 
				:orientation="orientation" object-fit="contain" 
				@statechange="statechange" @netstatus="netstatus" 
				@error="error" @fullscreenchange="fullscreenchange">
			</live-player>
			
			<view class="player-controls">
				<view class="control-item" @click="toggleMute">
					<text class="control-icon">{{isMuted ? '🔇' : '🔊'}}</text>
					<text class="control-text">{{isMuted ? '静音' : '声音'}}</text>
				</view>
				<view class="control-item" @click="toggleOrientation">
					<text class="control-icon">🔄</text>
					<text class="control-text">旋转</text>
				</view>
				<view class="control-item" @click="toggleFullScreen">
					<text class="control-icon">⛶</text>
					<text class="control-text">全屏</text>
				</view>
				<view class="control-item" @click="togglePlay">
					<text class="control-icon">{{isPlaying ? '⏸' : '▶️'}}</text>
					<text class="control-text">{{isPlaying ? '暂停' : '播放'}}</text>
				</view>
			</view>
		</view>
		
		<view class="info-box">
			<view class="input-group">
				<text class="label">播放地址：</text>
				<input class="input" v-model="playUrl" placeholder="输入RTMP/HLS播放地址" />
			</view>
			
			<view class="select-group">
				<text class="label">选择推流：</text>
				<view class="select-box">
					<view class="select-item" v-for="(item, index) in liveList" :key="index" @click="selectLive(item)">
						<text class="select-text">{{item.title}}</text>
					</view>
				</view>
			</view>
			
			<view class="status-box">
				<text class="status-title">播放状态：</text>
				<text class="status-value" :class="{'status-active': isPlaying}">{{statusTips}}</text>
			</view>
		</view>
		
		<button type="primary" class="play-btn" @click="togglePlay">{{isPlaying ? '停止播放' : '开始播放'}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				context: null,
				isPlaying: false,
				isMuted: false,
				orientation: 'vertical',
				isFullScreen: false,
				statusTips: '未播放',
				liveList: []
			}
		},
		computed: {
			playUrl() {
				return this.$serverConfig.rtmp.streamUrl();
			},
		},
		onLoad(options) {
			// 如果传入了推流流地址，则直接使用
			if (options.url) {
				this._playUrl = decodeURIComponent(options.url);
			}
			
			// 创建播放器上下文
			this.context = uni.createLivePlayerContext('livePlayer', this);
			
			// 初始化推流列表
			this.initLiveList();
			
			// 获取推流列表
			this.getLiveList();
		},
		onUnload() {
			// 页面卸载时停止播放
			if (this.isPlaying) {
				this.stopPlay();
			}
		},
		methods: {
			// 开始播放
			startPlay() {
				if (!this.playUrl) {
					uni.showToast({
						title: '请输入播放地址',
						icon: 'none'
					});
					return;
				}
				
				console.log('开始播放', this.playUrl);
				this.context.play({
					success: (res) => {
						console.log('播放成功', res);
						this.isPlaying = true;
						this.statusTips = '播放中';
					},
					fail: (err) => {
						console.error('播放失败', err);
						uni.showToast({
							title: '播放失败：' + JSON.stringify(err),
							icon: 'none'
						});
					}
				});
			},
			// 停止播放
			stopPlay() {
				this.context.stop({
					success: (res) => {
						console.log('停止播放', res);
						this.isPlaying = false;
						this.statusTips = '已停止';
					}
				});
			},
			// 切换播放/暂停状态
			togglePlay() {
				if (this.isPlaying) {
					this.stopPlay();
				} else {
					this.startPlay();
				}
			},
			// 切换静音
			toggleMute() {
				this.isMuted = !this.isMuted;
			},
			// 切换屏幕方向
			toggleOrientation() {
				this.orientation = this.orientation === 'vertical' ? 'horizontal' : 'vertical';
			},
			// 切换全屏
			toggleFullScreen() {
				if (this.isFullScreen) {
					this.context.exitFullScreen({
						success: (res) => {
							console.log('退出全屏', res);
						}
					});
				} else {
					this.context.requestFullScreen({
						direction: 0,
						success: (res) => {
							console.log('进入全屏', res);
						}
					});
				}
			},
			// 选择推流流
			selectLive(item) {
				this.playUrl = item.url;
				
				// 如果正在播放，则切换到新的流
				if (this.isPlaying) {
					this.stopPlay();
					setTimeout(() => {
						this.startPlay();
					}, 300);
				}
			},
			// 获取推流列表（未来从服务器获取）
			getLiveList() {
				// 这里可以调用API从服务器获取推流列表
				console.log('获取推流列表');
				// uni.request({...})
			},
			// 播放状态变化事件
			statechange(e) {
				console.log('播放状态变化', e.detail);
				if (e.detail.code === 2001) {
					this.isPlaying = true;
					this.statusTips = '已连接';
				} else if (e.detail.code === 2002) {
					this.isPlaying = true;
					this.statusTips = '播放中';
				} else if (e.detail.code === 2003) {
					this.isPlaying = false;
					this.statusTips = '已暂停';
				} else if (e.detail.code === -2301) {
					this.isPlaying = false;
					this.statusTips = '连接失败';
					uni.showToast({
						title: '网络错误，请检查播放地址',
						icon: 'none'
					});
				}
			},
			// 网络状态通知事件
			netstatus(e) {
				console.log('网络状态', e.detail);
			},
			// 错误事件
			error(e) {
				console.error('播放错误', e.detail);
				this.isPlaying = false;
				this.statusTips = '播放错误';
				uni.showToast({
					title: '播放错误：' + JSON.stringify(e.detail),
					icon: 'none'
				});
			},
			// 全屏变化事件
			fullscreenchange(e) {
				this.isFullScreen = e.detail.fullScreen;
				console.log('全屏状态变化', this.isFullScreen);
			},
			// 初始化推流列表
			initLiveList() {
				this.liveList = [
					{
						title: '测试推流1',
						url: this.$serverConfig.rtmp.stream1Url()
					},
					{
						title: '测试推流2',
						url: this.$serverConfig.rtmp.stream2Url()
					},
					{
						title: '测试推流3',
						url: this.$serverConfig.rtmp.stream3Url()
					}
				];
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding: 20rpx;
	}
	
	.player-box {
		width: 100%;
		position: relative;
		height: 450rpx;
		background-color: #000;
		margin-bottom: 30rpx;
	}
	
	.live-player {
		width: 100%;
		height: 100%;
	}
	
	.player-controls {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		display: flex;
		flex-direction: row;
	}
	
	.control-item {
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.control-icon {
		font-size: 36rpx;
	}
	
	.control-text {
		font-size: 20rpx;
		color: #FFFFFF;
		margin-top: 6rpx;
	}
	
	.info-box {
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.label {
		width: 180rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.input {
		flex: 1;
		height: 70rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.select-group {
		margin-bottom: 20rpx;
	}
	
	.select-box {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.select-item {
		height: 80rpx;
		background-color: #fff;
		border-radius: 8rpx;
		border: 1px solid #ddd;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}
	
	.select-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.status-box {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.status-title {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}
	
	.status-value {
		font-size: 28rpx;
		color: #999;
	}
	
	.status-active {
		color: #007AFF;
	}
	
	.play-btn {
		margin-top: 30rpx;
	}
</style> 